import React, { useCallback, useEffect, useState } from 'react';
import NavBar from '@/components/NavBar/NavBar';
import { useNavigate } from 'react-router-dom';
import { fetchDocList, followLikeDoctor } from '@/store/modules/homeStore';
import { Button, Ellipsis, InfiniteScroll, Tag, Toast } from 'antd-mobile';
import { useEnhanceDispatch } from '@/hooks';
import type { Doc, DocParams } from '@/type/HomeTyoe';
import { Image } from 'antd-mobile';
import './Doctor.scss';
import useFollow from '@/hooks/useFollow';

const Doctor = () => {
  const enhanceDispatch = useEnhanceDispatch();
  const navigate = useNavigate();
  const { handleFollow, message, loading } = useFollow();
  const [hasMore, setHasMore] = useState<boolean>(true);
  // 获取医生列表的参数
  const [docParams, setDocParams] = useState<DocParams>({
    current: 1,
    pageSize: 10,
  });
  // 医生列表
  const [doctorList, setDoctorList] = useState<Doc[]>([]);
  // 医生列表总数
  const [total, setTotal] = useState<number>(0);
  // 左边插槽内容
  const left = useCallback(() => (<span>返回</span>), []);
  // 中间插槽内容
  const children = useCallback(() => (<span>推荐列表</span>), []);

  /**
   * @description 获取关注医生列表的回调函数
   * */
  const fetchDoc = async () => {
    try {
      const { rows, total } = await enhanceDispatch(fetchDocList(docParams)).unwrap();
      setTotal(total);
      setDoctorList([...doctorList, ...rows]);
      setDocParams({ ...docParams, current: docParams.current += 1 });
      if (doctorList.length >= total) setHasMore(false);
    } catch (rejectedValueOrSerializedError: any) {
      Toast.show(rejectedValueOrSerializedError);
    }
  };

  /**
   * @description 点击关注按钮的回调函数
   * */
  const follow = async (doctor: Doc) => {
    const like = doctor.likeFlag === 1 ? 0 : 1;
    await handleFollow({ type: 'doc', id: doctor.id }, like);
    Toast.show({ icon: 'success', content: message.current });
  };

  useEffect(() => {
    // fetchDoc();
  }, []);

  return (
    <div className="doctor">
      {/*导航栏组件*/}
      <NavBar back={left()} children={children()} onBack={() => navigate(-1)}></NavBar>
      <div className="doctor-list">
        {
          doctorList.map((item, index) => {
            return (
              <div className="doctor-item" key={item.id}>
                <div className="avatar">
                  <Image src={item.avatar}></Image>
                </div>
                <div className="info">
                  <div className="top">
                    <span className="name">{item.name}</span>
                    <span className="depName">{item.depName} | </span>
                    <span className="title">{item.positionalTitles}</span>
                  </div>
                  <div className="bottom">
                    <Tag color="primary" fill="outline">
                      <Ellipsis direction='end' content={item.gradeName} /></Tag>
                    <Tag color="primary" fill="outline">
                      <Ellipsis direction='end' content={item.hospitalName} />
                  </Tag>
                  </div>
                </div>
                <div className="follow">
                  <Button loading={loading} color="primary" onClick={() => follow(item)}>{item.likeFlag === 1 ? '已关注' : '+关注'}</Button>
                </div>
              </div>
            );
          })
        }
        <InfiniteScroll loadMore={fetchDoc} hasMore={hasMore} />
      </div>
    </div>
  );
};

export default Doctor;